<template>
	<view class="club">
		<!-- <view class="header">
			<view class="search">
				<image src="@/static/images/c1.png"></image>
				<input type="text" placeholder="搜索关键词" @confirm="submit">
			</view>
		</view> -->
		<scroll-view scroll-y class="scroll_view">
			<uv-swiper :list="rotation" keyName="img" radius="0" imgMode="scaleToFill" height="300"></uv-swiper>
			<view class="content">
				<view class="inlet">
					<view class="item" @click="router('/pages/club/shopping')">
						<view class="key">商城</view>
						<view class="cell">
							<view>喝军酒·壮国威</view>
							<image src="@/static/images/c2.png"></image>
						</view>
					</view>
					<view class="item" @click="router('/pages/club/block')">
						<!-- <view class="key">至尊卡</view>
						<view class="cell">
							<view>免费兑换酒里春</view>
							<image src="@/static/images/c3.png"></image>
						</view> -->
					</view>
				</view>
				<view class="tabs">
					<view class="item" v-for="item in data_club" @click="router(`/pages/club/club_deta?id=${item.id}`)">
						<image :src="item.thumbnail"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="title">
					<view class="left">俱乐部动态</view>
					<!-- <view class="right">
						<view>更多</view>
						<image src="@/static/images/c7.png"></image>
					</view> -->
				</view>
				<view class="list">
					<view class="item" v-for="item in list" @click="router(`/pages/club/news_deta?id=${item.id}`)">
						<view class="item_view">
							<view class="key">{{item.title}}</view>
							<view class="time">{{item.created_at}}</view>
						</view>
						<image :src="item.thumbnail"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		club
	} from "@/request/api";
	const wechat = import.meta.env.VITE_WX_URL;
	const wechat_open = import.meta.env.VITE_WX_OPEN;

	import {
		userInfo
	} from "@/request/api";

	import useLogin from "@/hooks/useLogin.js";
	import useBase from "@/hooks/useBase.js";
	import useWechat from "@/hooks/useWechat.js";
	import useShare from "@/hooks/useShare.js";
	const {
		wxLogin
	} = useLogin();

	const {
		router
	} = useBase();
	const {
		wxShare
	} = useWechat();
	const {
		shop_share,
		home_url
	} = useShare();

	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";

	const rotation = ref([]),
		data_club = ref([]),
		list = ref([]);

	const getDeta = async () => {
		let res = await club();
		rotation.value = res.rotation;
		data_club.value = res.club;
		list.value = res.recommend;
	};

	const getUserInfo = async () => {
		let {
			user
		} = await userInfo();
		let invitation = user.invitation_code;
		let shop_share_url = `${home_url}?invitation=${invitation}`;

		wxShare({
			title: '小酒馆',
			desc: shop_share.desc,
			link: shop_share_url,
			imgUrl: shop_share.imgUrl
		});
	};

	onShow(async () => {
		await wxLogin()
		await getUserInfo();
		await getDeta();
	});
</script>

<style scoped lang="scss">
	.club {
		height: calc(100vh - var(--window-top) - var(--window-bottom));

		.header {
			height: 108rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background: #CA1C1D;

			.search {
				width: 100%;
				height: 68rpx;
				border-radius: 34rpx;
				padding-left: 25rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				input {
					flex: 1;
					color: #666666;
					font-size: 24rpx;
					padding: 0 15rpx;
					box-sizing: border-box;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom));
			// height: calc(100vh - var(--window-top) - 108rpx - var(--window-bottom));

			.content {
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				margin-top: -30rpx;
				padding: 30rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				position: relative;
				z-index: 2;

				.inlet {
					display: flex;
					justify-content: space-between;

					.item {
						width: 335rpx;
						height: 160rpx;
						padding: 20rpx;
						box-sizing: border-box;

						&:first-child {
							background-image: url(@/static/images/c4.png);
							background-size: 100% 100%;
						}

						&:last-child {
							background-image: url(@/static/images/c5.png);
							background-size: 100% 100%;

							.key {
								color: #FFE2BD;
							}

							.cell {
								view {
									color: #EEEEEE;
								}
							}
						}

						.key {
							color: #CA1C1D;
							font-size: 28rpx;
							font-family: Alimama ShuHeiTi;
							font-weight: bold;
							padding-bottom: 16rpx;
							box-sizing: border-box;
						}

						.cell {
							display: flex;
							align-items: center;

							view {
								color: #999999;
								font-size: 20rpx;
								font-weight: 400;
								padding-right: 6rpx;
								box-sizing: border-box;
							}

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
				}

				.tabs {
					padding: 20rpx 0 25rpx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-between;

					.item {
						width: 220rpx;
						height: 88rpx;
						border-radius: 20rpx;
						margin-right: 15rpx;
						margin-bottom: 15rpx;
						padding: 0 16rpx;
						box-sizing: border-box;
						background: #EEEEEE;
						display: flex;
						align-items: center;

						&:nth-child(3n) {
							margin-right: 0;
						}

						image {
							width: 50rpx;
							height: 50rpx;
						}

						view {
							flex: 1;
							color: #333333;
							font-size: 24rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							padding-left: 12rpx;
							box-sizing: border-box;
						}
					}
				}

				.title {
					display: flex;
					justify-content: space-between;

					.left {
						color: #333333;
						font-size: 36rpx;
						font-weight: bold;
						padding-left: 12rpx;
						border-left: 8rpx solid #CA1C1D;
						box-sizing: border-box;
					}

					.right {
						display: flex;
						align-items: center;

						view {
							color: #999999;
							font-size: 26rpx;
							padding-right: 5rpx;
							box-sizing: border-box;
						}

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.list {
					.item {
						border-bottom: 1px solid #F5F5F5;
						padding: 20rpx 0;
						box-sizing: border-box;
						display: flex;

						.item_view {
							flex: 1;
							padding-top: 10rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.key {
								line-height: 36rpx;
								color: #333333;
								font-size: 28rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.time {
								color: #999999;
								font-size: 24rpx;
							}
						}

						image {
							width: 220rpx;
							height: 165rpx;
						}
					}
				}
			}
		}
	}
</style>